import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { ArrowLeft, ThumbsUp, Star } from 'lucide-react'
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts'

const ParentPage = () => {
  const navigate = useNavigate()
  const [hasLiked, setHasLiked] = useState(false)

  // 示例数据
  const progressData = [
    { name: 'Completed', value: 7, color: '#10b981' },
    { name: 'In Progress', value: 2, color: '#f59e0b' },
    { name: 'Incorrect', value: 1, color: '#ef4444' }
  ]

  const rewards = [
    { text: 'Excellent!', date: 'Apr 22 1:02 PM' },
    { text: 'Excellent!', date: 'Apr 21 9:30 AM' },
    { text: 'Excellent!', date: 'Apr 18 3:15 PM' }
  ]

  const handleLike = () => {
    setHasLiked(true)
    console.log('Parent liked the progress')
  }

  return (
    <div className="min-h-screen p-4">
      {/* Header */}
      <div className="flex items-center mb-6">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => navigate('/weekly-report')}
          className="mr-4"
        >
          <ArrowLeft size={24} />
        </Button>
        <h1 className="text-2xl font-bold text-gray-800">Child's Progress</h1>
      </div>

      {/* Weekly Progress */}
      <Card className="mb-6 bg-white/90 backdrop-blur-sm">
        <CardContent className="p-6">
          <h2 className="text-xl font-bold text-gray-800 mb-4">Weekly Progress</h2>
          <div className="flex justify-center">
            <div className="w-48 h-48">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={progressData}
                    cx="50%"
                    cy="50%"
                    innerRadius={40}
                    outerRadius={80}
                    paddingAngle={5}
                    dataKey="value"
                  >
                    {progressData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                </PieChart>
              </ResponsiveContainer>
            </div>
          </div>
          
          {/* Legend */}
          <div className="flex justify-center gap-4 mt-4">
            {progressData.map((entry, index) => (
              <div key={index} className="flex items-center gap-2">
                <div 
                  className="w-4 h-4 rounded-full" 
                  style={{ backgroundColor: entry.color }}
                ></div>
                <span className="text-sm text-gray-700">
                  {entry.name} ({entry.value})
                </span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Like Button */}
      <Card className="mb-6 bg-white/90 backdrop-blur-sm">
        <CardContent className="p-6 text-center">
          <Button
            onClick={handleLike}
            disabled={hasLiked}
            className={`w-full py-6 text-xl font-semibold rounded-xl ${
              hasLiked 
                ? 'bg-gray-300 text-gray-500 cursor-not-allowed' 
                : 'bg-blue-500 hover:bg-blue-600 text-white'
            }`}
          >
            <ThumbsUp size={32} className="mr-3" />
            {hasLiked ? 'Liked!' : 'Like'}
          </Button>
        </CardContent>
      </Card>

      {/* Rewards Given */}
      <Card className="bg-white/90 backdrop-blur-sm">
        <CardContent className="p-6">
          <h2 className="text-xl font-bold text-gray-800 mb-4">Rewards Given</h2>
          <div className="space-y-3">
            {rewards.map((reward, index) => (
              <div key={index} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                <Star size={24} className="text-yellow-500" />
                <div className="flex-1">
                  <p className="font-semibold text-gray-800">{reward.text}</p>
                </div>
                <p className="text-sm text-gray-500">{reward.date}</p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

export default ParentPage

